<template>
  <div class="h-full image-container relative flex-1">
    <div class="flex flex-col h-full gr-2">
      <div class="w-full flex justify-between items-center container-header py-2 px-4">
        <div class="flex gap-x-4 items-center">
          <div class="text-14 text-bold">
            {{ t('模板名称') }}
            <a-tag>{{ stageConfig.name }}</a-tag>
          </div>

          <a-popover placement="bottom" trigger="click">
            <a-button type="ghost">
              {{ t('更多') }}
              <DownOutlined />
            </a-button>
            <template #content>
              <div class="flex gr-4 flex-col w-[200px]">
                <div class="flex gap-x-4">
                  <div class="text-12">
                    {{ t('模板尺寸') }}
                    <a-tag>{{ stageConfig.w }}x{{ stageConfig.h }}</a-tag>
                  </div>
                </div>
                <div class="flex items-center gap-x-4">
                  {{ t('模板颜色') }}
                  <a-tag>
                    {{ deviceColorList[stageConfig.deviceColor]?.label || stageConfig.deviceColor }}
                  </a-tag>
                </div>
                <div class="text-12">
                  {{ t('绑定数量') }}
                  <a-tag>{{ number }}</a-tag>
                </div>
              </div>
            </template>
          </a-popover>
        </div>
        <div class="flex gap-x-4 items-center">
          <a-button @click="previewImage">
            <reload-outlined />
          </a-button>
        </div>
      </div>
      <div class="flex-1 overflow-y-auto">
        <div class="w-full h-full flex justify-center items-center p-8">
          <a-image :src="previewImageSrc" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { previewImageSrc } from './bus';
import { stageConfig } from '../../data/stage';
import { previewTpl, getBoundCount } from '@/api/modules/esl/template';
import { deviceColorList } from '@/data/system.options';

const { t } = useI18n();
const loading = ref(true);
const number = ref(0);

/**
 * 注释: 生成预览
 *
 * */
const previewImage = async () => {
  loading.value = true;
  stageConfig.value.components = [];
  const { data } = await previewTpl({
    stage: stageConfig.value,
    // templateList: currentStage.value.components,
    templateList: [],
  });
  console.log(data);

  previewImageSrc.value = data.data;
  loading.value = false;
};
onMounted(async () => {
  const templateId = stageConfig.value.id;
  if (templateId) {
    const { data } = await getBoundCount(templateId);
    number.value = parseInt(data.data, 10);
  }
  previewImage();
});
</script>

<style lang="scss" scoped>
.image-container {
  background-color: #f8f8f8;
  color: black;
  max-height: 500px;
  .container-header {
    background-color: white;
    line-height: 24px;
  }
  .dispatch {
    background-color: var(--primary);
    border-radius: 4px;
    text-align: center;
    color: white;
    height: 24px;
    line-height: 24px;
  }

  img {
    object-fit: contain;
  }
  .tags {
    background-color: #333;
    color: white;
    border-radius: 2px;
    padding: 0 12px;
  }
}
</style>
